<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../laydate/laydate.js"></script>
    <link rel="stylesheet" href="../css/usermanagement.css">
</head>
<body bgcolor="#f2f3f2">

<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="select-list">
                    <ul class="ul">
                        <li>
                            角色名称：<input type="text" name="loginName" id="roleName"/>
                        </li>
                        <li>
                            角色字符：<input type="text" name="loginName" id="roleKey"/>
                        </li>
                        <li class="select-time">
                            <label>&nbsp;创建时间： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
                        </li>
                    </ul>
                </div>
                <div class="select-btn">
                    <ul>
                        <li>
                            <button type="button" class="layui-btn layui-btn-normal layui-btn-radius layui-btn-sm" onclick="select()">搜索</button>
                            <button type="button" class="layui-btn layui-btn-warm layui-btn-radius layui-btn-sm" onclick="empty()">重置</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-card" >
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                    <div class="but-group">
                        <div class="layui-btn-group">
                            <button type="button" class="layui-btn layui-btn-sm" onclick="location.href = '/role/add'"><i class="layui-icon"></i></button>
                            <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-refresh" onclick=""></i></button>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="height: 650px">
                    <table class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>Id</th>
                            <th>角色名称</th>
                            <th>角色字符</th>
                            <th>创建时间</th>
                            <th>最后修改时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="role-list">

                        </tbody>
                    </table>
                </div>
                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 ">
                    第
                    <label id="pageNum"></label>
                    页，共
                    <label id="PageCount"></label>
                    页
                </div>
                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 ">
                    <div class="page-switch">
                        <input type="text" name="pagenum" id="pagenumtext"  oninput = "value=value.replace(/[^\d]/g,'')">
                    </div>
                    <div class="layui-btn-group page-switch">
                        <button type="button" class="layui-btn layui-btn-sm" onclick="previous()">上一页</button>
                        <button type="button" class="layui-btn layui-btn-sm" onclick="next()">下一页</button>
                        <button type="button" class="layui-btn layui-btn-sm" onclick="lastpage()">尾页</button>
                        <button type="button" class="layui-btn layui-btn-sm" onclick="gotonum()">跳转到</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="../layui/layui.js"></script>
<script src="../laydate/laydate.js"></script>
<script src="../jquery-3.4.1.js"></script>
<script src="../js/DateUtil.js"></script>
<script>



    window.onload = function(){

        $.ajax({
            type:"get",
            url:"/role/list",
            data:{
                "pageSize":15,
                "pageNumber":1,
            },
            success:function (f) {
                if (f.code == 0){
                    var obj = f.data.data;
                    var ul = "";
                    for (let i = 0; i < obj.length; i++) {
                        var create = new Date(obj[i].createTime);
                        var update = new Date(obj[i].updateTime);
                        ul=ul+"<tr>" +
                            "<td>"+obj[i].roleId+"</td>" +
                            "<td>"+obj[i].roleName+"</td>" +
                            "<td>"+obj[i].roleKey+"</td>" +
                            "<td>"+timestampToDateTime(create)+"</td>" +
                            "<td>"+timestampToDateTime(update)+"</td>" +
                            "<td>"+
                            "<button type=\"button\" class=\"layui-btn layui-btn-sm\" onclick='update("+obj[i].roleId+")'>修改</button>" +
                            "<button type=\"button\" class=\"layui-btn layui-btn-danger layui-btn-sm\">删除</button>"+
                            "</td>" +
                            "</tr>"
                    }
                    document.getElementById("role-list").innerHTML=ul
                    document.getElementById("PageCount").innerText = f.data.PageCount;
                    document.getElementById("pageNum").innerText = f.data.pageNum;
                }
            }
        })

    }

    function empty() {
        document.getElementById("roleName").value = "";
        document.getElementById("roleKey").value = "";
        document.getElementById("startTime").value = "";
        document.getElementById("endTime").value = "";
    }

    function select(){
        var roleName = document.getElementById("roleName").value;
        var roleKey = document.getElementById("roleKey").value;
        var startTime = document.getElementById("startTime").value;
        var endTime = document.getElementById("endTime").value;
        document.getElementById("role-list").innerHTML="";
        $.ajax({
            type:"get",
            url:"/role/list",
            data:{
                "roleName":roleName,
                "roleKey":roleKey,
                "startTime":startTime,
                "endTime":endTime,
                "pageSize":15,
            },
            success:function (f) {
                if (f.code == 0){
                    var obj = f.data.data;
                    var ul = "";
                    for (let i = 0; i < obj.length; i++) {
                        var create = new Date(obj[i].createTime);
                        var update = new Date(obj[i].updateTime);
                        ul=ul+"<tr>" +
                            "<td>"+obj[i].roleId+"</td>" +
                            "<td>"+obj[i].roleName+"</td>" +
                            "<td>"+obj[i].roleKey+"</td>" +
                            "<td>"+timestampToDateTime(create)+"</td>" +
                            "<td>"+timestampToDateTime(update)+"</td>" +
                            "<td>"+
                            "<button type=\"button\" class=\"layui-btn layui-btn-sm\" onclick='update("+obj[i].roleId+")'>修改</button>" +
                            "<button type=\"button\" class=\"layui-btn layui-btn-danger layui-btn-sm\">删除</button>"+
                            "</td>" +
                            "</tr>"
                    }
                    document.getElementById("role-list").innerHTML=ul
                    document.getElementById("PageCount").innerText = f.data.PageCount;
                    document.getElementById("pageNum").innerText = f.data.pageNum;
                }
            }
        })
    }


    laydate.render({
        elem: '#startTime'
    });

    laydate.render({
        elem: '#endTime'
    });
</script>

</body>
</html>